<template>
	<div class="py-2 h-[80vh] flex flex-col">
		<h2 class="text-xl text-zinc-900 dark:text-zinc-200 font-bold mb-2 px-1">
			所有分类
		</h2>
		<ul ref="ulTarget" class="overflow-y-scroll">
			<li
				class="text-lg text-zinc-900 dark:text-zinc-300 px-1 py-1.5 duration-100 active:bg-zinc-100 dark:active:bg-zinc-900"
				v-for="(item, index) in $store.getters.categorys"
				:key="item.id"
				@click="$emit('onItemClick', item, index)"
			>
				{{ item.name }}
			</li>
		</ul>
	</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useEventListener } from '@vueuse/core'

defineEmits(['onItemClick'])

const ulTarget = ref(null)

onMounted(() => {
	// 解决 @vueuse/core 新版本会导致所有元素无法响应 touchmove 事件问题
	useEventListener(ulTarget, 'touchmove', (event) => {
		// 阻止事件冒泡
		event.stopPropagation()
	})
})
</script>

<style scoped lang="scss"></style>
